<template>
    <div class="forget-page">
      <!-- 顶部导航栏 -->
      <NavBar navbarTitle="修改密码"></NavBar>
      <!-- 页面主体内容区 -->
      <div class="page-content">
        <div class="content-logo">
          <img class="logo-img" src="/src/assets/images/logo/XCJSLogo3.png" alt="">
        </div>
        <!-- 忘记密码表单区域 -->
        <div class="content-form">
          <div class="form-item">
            <div class="item-icon">
              <SvgIcon name="user" width="1.2em" height="1em" color="#c8c9cc"></SvgIcon>
            </div>
            <input class="item-input" type="text" placeholder="请输入用户名" v-model="forgetForm.username">
          </div>
          <div class="form-item">
            <div class="item-icon">
              <SvgIcon name="phone" width="1.2em" height="1.2em" color="#c8c9cc"></SvgIcon>
            </div>
            <input class="item-input" type="text" placeholder="请输入手机号" v-model="forgetForm.phone">
          </div>
          <div class="form-item">
            <div class="item-icon" @click="showOrHiddenPwd">
              <SvgIcon :name="showPwd ? 'eye-o' : 'eye-c' " width="1.1em" height="1.1em" color="#c8c9cc"></SvgIcon>
            </div>
            <input class="item-input" :type="showPwd ? 'text' : 'password' " placeholder="请输入新密码" v-model="forgetForm.password">
          </div>
          <div class="form-item">
            <div class="item-icon">
              <SvgIcon name="repassword" width="1em" height="1em" color="#c8c9cc"></SvgIcon>
            </div>
            <input class="item-input" type="password" placeholder="确认密码" v-model="forgetForm.repassword">
          </div>
          <div class="form-item captcha-code">
            <div class="item-icon">
              <SvgIcon name="verificationCode" width="1.1em" height="1.1em" color="#c8c9cc"></SvgIcon>
            </div>
            <input class="item-input" type="text" placeholder="请输入验证码">
            <!-- 验证码图片 -->
            <img class="item-captcha-code" :src="forgetForm.imageBase64Url" @click="changeCaptcheImg" alt="验证码" title="验证码">
          </div>
        </div>
        <!-- 用户协议及登录按钮区域 -->
        <div class="content-login">
          <div class="login-btn">
            <van-button class="btn-item" type="primary" @click="editPassword_btn">修改密码</van-button>
          </div> 
        </div>
      </div>
    </div>
  </template>
  
<script setup lang="ts">
import NavBar from '@/components/NavBar/NavBar.vue';
import SvgIcon from '@/components/SvgIcon/SvgIcon.vue';
//引入vant组件
import { Radio as VanRadio, Button as VanButton, showToast, showSuccessToast, showFailToast } from "vant";
//引入vue组合式api
import { ref, reactive, onMounted } from "vue";
//引入vue-router
import { useRoute, useRouter } from "vue-router";
const router = useRouter();
//@ts-ignore引入请求api
import { reqCaptchaImgCode } from "@/api/login/index.ts";
import { reqUpdateUserInfo } from "@/api/user/index";

//忘记密码表单区域
const forgetForm = reactive({
  imageBase64Url:"",
  username:"",
  phone:"",
  password:"",
  repassword:"",
  captchaImgCode:""
})
//展示svg图标 眼睛开|眼睛闭
let showPwd = ref(false);

//显示或者隐藏密码事件
function showOrHiddenPwd () {
  showPwd.value = !showPwd.value;
}

//点击验证码图片更换验证码
let timer:any = null;
function changeCaptcheImg () {
  if(timer !== null) {
    clearTimeout(timer);
  }
  timer = setTimeout(() => {
    //请求验证码图片
    getCaptchaImgCode();
  },500)
}
//获取验证码
async function getCaptchaImgCode () {
  let res = await reqCaptchaImgCode ();
  let url = "";
  let imageBase64 = ""
  if(res.code === 200) {
    //base64图片验证码获取成功
    if(!res.data.includes("data:image/png;base64,")){
      imageBase64 = "data:image/png;base64," + res.data;
    } else {
      imageBase64 = res.data;
    }
    //url = window.URL.createObjectURL(new Blob([imageBase64],{type:"image/png"}));  //转换成图片地址

    //将base64字符串转换为Blob对象
    let byteCharacters = atob(imageBase64.split(",")[1]);
    let byteNumbers = new Array(byteCharacters.length);
    for (var i = 0; i < byteCharacters.length; i++) {
      byteNumbers[i] = byteCharacters.charCodeAt(i);
    }
    let byteArray = new Uint8Array(byteNumbers);
    let blob = new Blob([byteArray], { type: 'image/png' }); // 根据实际图片格式设置type
    url = URL.createObjectURL(blob);
  }
  forgetForm.imageBase64Url = url;
  console.log('图片验证码接口api',res);
  // console.log(imageBase64, url);
}

//修改密码按钮
const editPassword_btn = async () => {
  //准备参数
  const paramsObj = {username:forgetForm.username,phone:forgetForm.phone,password:forgetForm.password};
  //校验参数
  if(paramsObj.username.trim() === "") return showToast("用户名不能为空!");
  if(paramsObj.phone.length !== 11 || isNaN(Number(paramsObj.phone))) return showToast("手机号码格式错误!");
  if(paramsObj.password.trim().length < 6) return showToast("密码不能少于六位!");
  if(paramsObj.password !== forgetForm.repassword) return showToast("两次输入的密码不一致!");
  //发请求
  //console.log(paramsObj);
  let res = await reqUpdateUserInfo(paramsObj);
  if(res.code === 200){
    showSuccessToast({message:"密码修改成功!即将跳转登录...",position:"middle"});
    //延时跳转到登录页
    setTimeout(() => {
      router.push("/login");
    },800)
  } else {
    showFailToast({message:"用户名错误!请重试",position:"middle"});
  }
  console.log('修改会员用户信息api',res);
}

//vue生命周期
onMounted(() => {
  //获取验证码
  getCaptchaImgCode();
})

</script>
  
<style lang="less" scoped>
.forget-page{
  width: 375px;
  height: 100vh;
  .page-content{
      width: 375px;
      height: calc(100vh - 46px);
      position: relative;
      top:47px;
      overflow: scroll;
      /**商城logo部分 */
      .content-logo{
          width: 140px;
          height: 140px;
          margin: 10px auto;
          display: flex;
          justify-content: center;
          .logo-img{
              height: 140px;
          }
      }
      /**登录表单区域 */
      .content-form{
        width: 360px;
        height: 270px;
        margin: 20px auto;
        border-radius: 5px;
        .form-item{
          width: 320px;
          height: 40px;
          padding: 0 5px;
          margin: 15px auto 0 auto;
          box-sizing: border-box;
          border-bottom: 1px solid #ece9e9;
          // background: #efefef;
          display: flex;
          justify-content: space-between;
          align-items: center;

        .item-input{
          width: 270px;
          height: 30px;
          border: none;
          font-size: 16px;
          color: #9195a3;
          
          &::placeholder{
            font-size: 14px;
            color: #c7c5c5;
          }
        }
        }
        /**表单项-带验证码 */
        .captcha-code{
          width: 320px;
          height: 40px;
          padding: 0 5px;
          margin: 15px auto 0 auto;
          box-sizing: border-box;
          border-bottom: 1px solid #ece9e9;
          // background: #efefef;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .item-input{
            width: 150px;
            height: 30px;
            border: none;
            font-size: 16px;
            color: #9195a3;
            
            &::placeholder{
              font-size: 14px;
              color: #c7c5c5;
            }
          }
          .item-captcha-code{
            width: 110px;
            height: 30px;
            cursor: pointer;
          }
        }
      }
      /**用户协议及登录按钮区域 */
      .content-login{
          width: 375px;
          margin: 0 auto;
          padding: 10px;
          box-sizing: border-box;
          .login-agreement{
          margin-top: 15px;
          width: 355px;
          height: 15px;
          font-size: 10px;
          color: #c7c5c5;
          .agreement-tip{
              color: #9195a3;
          }
          .agreement-text{
              color: #3b3b3b;
          }
          }
          .login-btn{
          width: 355px;
          .btn-item{
              width: 355px;
              height: 40px;
          }
          }
      }
  }
}
</style>